<!--角色管理-->
<template>
    <div class="avue-crud">
        <div class="top-box">
            <h1>角色管理</h1>
        </div>
        <basic-container>
            <div class="door-search">
                <p>角色搜索</p>
                <el-input v-model="input" placeholder="输入角色名以搜索" class="search-style"></el-input>
                <el-button type="success" icon="el-icon-search">搜索</el-button>
                <el-button type="success"  @click="toMarkDown">新建角色</el-button>
            </div>
            <!--    门禁组列表-->
            <el-form>
                <el-form-item>
                    <el-table :data="equipData" ref="multipleTable"
                              tooltip-effect="dark"
                              style="width: 100%"
                              @selection-change="handleSelectionChange">
                        <el-table-column label="全选"
                                         type="selection"
                                         width="55">
                        </el-table-column>
                        <el-table-column property="id" label="id" width="60px"></el-table-column>
                        <el-table-column property="name" label="角色名称" width="100px"></el-table-column>
                        <el-table-column property="temperature" label="功能权限">
                            <template slot-scope="scope">
                                <el-tag size="medium"  type="success">{{ scope.row.state }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column property="launch" label="创建时间"></el-table-column>
                        <el-table-column property="zt" label="状态" width="100px">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="value4">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column property="opera" label="操作" >
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleDelete(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>

            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </basic-container>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        name: "role",
        computed: {
            ...mapGetters(['permissions']),
        },
        data() {
            return {
                input:'',
                options: [],
                value: [],
                list: [],
                loading: false,
                states: [],
                selects: [{          //多选下拉框
                    value: '选项1',
                    label: '男'
                }, {
                    value: '选项2',
                    label: '女'
                }, ],
                value1: [],
                value2: [],
                value3: [],
                value4: true,
                equipData:[{       //门禁组列表
                    id:'001',
                    name:'超级管理员',
                    state:'点击查看',
                    launch:'2020-12-01 00:00:05',
                    zt:'',
                    opera:'',
                }],
            }
        },
        mounted() {
            this.list = this.states.map(item => {
                return { value: `value:${item}`, label: `label:${item}` };
            });
        },
        methods: {
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },

            toMarkDown:function () {
                this.$router.replace('build')
            },
        },

    }
</script>

<style scoped>
    .contain-title{
        font-weight: bold;
    }
    .door-search p {
        font-size: 14px;
        display: inline-block;
        margin-right: 20px;
    }
    .time-style{
        width: 15%;
        margin-right: 20px;
        display: inline-block;
    }
    .search-style{
        width: 15%;
        margin-right: 20px;
        border-radius: 25px;
    }
    .select-style{
        width: 10% !important;
        margin-right: 20px;
    }
    .choice{
        float: left;
    }
    .screen{
        margin-left: 36px;
        display: inline-block;
    }
    .jj{
        margin-left: 160px;
    }
    .ma{
        margin-right: 12px !important;
    }
    .father{
        width: 35%;
        display: inline-block;
        position: relative;
        margin-left: 102px;
    }
    .son{
        position: absolute;
        top: 7px;
        right: 53%;
        border-radius: 10px;
    }
    .father .search-style{
        width: 30%;
        margin-right: 20px;
    }
    .top-box{
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #bbbb;
        border-left: 12px solid #2AAE5A;
        overflow: hidden;
    }
    .top-box h1{
        color:#2AAE5A;
        margin: 20px 0 0 20px;
    }
</style>